<template>
    <div :class="classList" :style="styleList">
        <a class="ml-3" style="cursor: pointer;" @click="$emit('deleteItems')"><i class="fa fa-trash-o" aria-hidden="true"></i></a>
        <a class="ml-3" style="cursor: pointer;" @click="$emit('exportItems')"><i class="fa fa-cloud-download" aria-hidden="true"></i></a>
        <a class="ml-3" style="cursor: pointer;" @click="$emit('importItems')"><i class="fa fa-cloud-upload" aria-hidden="true"></i></a>
        <a class="ml-3" style="cursor: pointer;" @click="$emit('close')"><i class="fa fa-times" aria-hidden="true"></i></a>
    </div>
</template>

<script>
export default {
    data() {
            return {
            }
        },
    props: ['show'],
    emits: ['deleteItems', 'exportItems', 'importItems', 'close'],
    methods: {
    },
    watch: {
    },
    computed: {
        classList() {
            return {
                'p-2': true,
                'border': true,
                'border-light': true,
                'rounded-sm': true,
                'opt': true,
                'fade-in1': this.show,
                'd-none1': !this.show
            }
        },
        styleList() {
            return {
                bottom: this.show ? '10%' : '0%',
                visibility: this.show ? 'visible' : 'hidden',
            }
        }
    }
}
</script>

<style>
.opt {
    position: fixed;
    transition: opacity .4s, bottom .5s, visibility .3s;
    transform: translate(-50%, -50%);
    left: 50%;
    font-size: 2em;
    background: #fff8;
}
</style>

<custom1>
  This could be e.g. documentation for the component.
</custom1>
